import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import LoadingExample from '../../../examples/loading';
import LinearProgressExample from '../../../examples/linear-progress';
import ReactQueryExample from '../../../examples/react-query';

<Head>
  <title>{'Async Loading UI Guide - Material React Table V3 Docs'}</title>
  <meta
    name="description"
    content="How to show loading indicators, skeletons, and progress bars in Material React Table"
  />
</Head>

## Async Loading UI Feature Guide

While you are fetching your data, you may want to show some loading indicators. Material React Table has some nice loading UI features built in that look better than a simple spinner.

> This guide is mostly focused on the loading UI features. Make sure to also check out the [Remote Data](/docs/examples/remote) and [React Query](/docs/examples/react-query) examples for server-side logic examples.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={
    new Set([
      'muiSkeletonProps',
      'muiLinearProgressProps',
      'muiCircularProgressProps',
    ])
  }
/>

### Relevant State Options

<StateOptionsTable
  onlyOptions={
    new Set([
      'isLoading',
      'isSaving',
      'showLoadingOverlay',
      'showProgressBars',
      'showSkeletons',
    ])
  }
/>

### isLoading UI

There are three different loading UI features that are built into Material React Table:

1. Loading Overlay - shows spinner overlay over the table container.
2. Cell Skeletons - show pretty and shimmering skeletons for each cell.
3. Linear Progress Bars - shows progress bars above and/or below the table.

You can use any combination of these loading UIs by managing the `showLoadingOverlay`, `showSkeletons`, and `showProgressBars` states.

There are also two other loading states that are shortcuts for combining some of the above states:

- `isLoading` - shows loading overlay and cell skeletons.
- `isSaving` - shows the progress bars and adds spinners to the save buttons in editing features.

Here is some of the recommended loading UI that you might use with React Query:

```jsx
const {
  data = [],
  isLoading: isLoadingTodos,
  isRefetching: isRefetchingTodos,
} = useQuery({
  /**/
});

const { mutate, isPending: isSavingTodos } = useMutation({
  /**/
});

const table = useMaterialReactTable({
  columns,
  data,
  state: {
    isLoading: isLoadingTodos, //cell skeletons and loading overlay
    showProgressBars: isRefetchingTodos, //progress bars while refetching
    isSaving: isSavingTodos, //progress bars and save button spinners
  },
});

return <MaterialReactTable table={table} />;
```

> Note: The Loading Overlay UI makes the table container non-interactive while it is showing. This is usually desired while no data is yet in the table. Consider avoiding using the Loading Overlay UI during "refetching" operations like filtering, sorting, or pagination.

### Customize Loading UI

You can customize the loading UI by passing props to the `muiSkeletonProps`, `muiLinearProgressProps`, and `muiCircularProgressProps` props.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  muiSkeletonProps: {
    animation: 'wave',
  },
  muiLinearProgressProps: {
    color: 'secondary',
  },
  muiCircularProgressProps: {
    color: 'secondary',
  },
});

return <MaterialReactTable table={table} />;
```

<LoadingExample />

#### Custom Loading Spinner component

> New in v2.11.0

If you need to use a custom loading spinner component other than the built-in MUI one, you can now pass in custom component in the `muiCircularProgressProps` `Component` prop.

```jsx
import { MyCustomSpinner } from './MyCustomSpinner';

const table = useMaterialReactTable({
  columns,
  data,
  muiCircularProgressProps: {
    Component: <MyCustomSpinner />,
  },
});
```

### Only Show Progress Bars or Skeletons

If you do not want both progress bars and cell skeletons to show, you can use the `showProgressBars` and `showSkeletons` states, instead.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  state: {
    showProgressBars: true, //or showSkeletons
  },
});
```

<LinearProgressExample />

### Full Loading and Server-Side Logic Example

Here is a copy of the full [React Query](/docs/examples/react-query) example.

<ReactQueryExample />
